{% extends 'base.html' %}
{% load static %}

{% block title %}评分方式切换测试{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'grading/vendor/bootstrap-icons/font/bootstrap-icons.css' %}">
<link rel="stylesheet" href="{% static 'grading/css/custom.css' %}">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <div class="col-md-8 offset-md-2">
            <div class="card">
                <div class="card-header">
                    <h5 class="card-title mb-0">评分方式切换测试</h5>
                </div>
                <div class="card-body">
                    <!-- 评分按钮组 -->
                    <div class="d-flex align-items-center mb-3">
                        <!-- 评分方式切换 -->
                        <div class="btn-group me-3" role="group" aria-label="评分方式">
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn active" data-mode="letter">
                                字母等级
                            </button>
                            <button type="button" class="btn btn-outline-secondary grade-mode-btn" data-mode="text">
                                文字等级
                            </button>
                        </div>

                        <!-- 字母等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="字母评分选项" id="letter-grade-buttons">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="A">A</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="B">B</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="C">C</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="D">D</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="E">E</button>
                        </div>

                        <!-- 文字等级按钮组 -->
                        <div class="btn-group me-3" role="group" aria-label="文字评分选项" id="text-grade-buttons" style="display: none;">
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="优秀">优秀</button>
                            <button type="button" class="btn btn-outline-primary grade-button active" data-grade="良好">良好</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="中等">中等</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="及格">及格</button>
                            <button type="button" class="btn btn-outline-primary grade-button" data-grade="不及格">不及格</button>
                        </div>
                    </div>

                    <!-- 状态显示 -->
                    <div class="alert alert-info">
                        <strong>当前状态：</strong><br>
                        <span id="current-mode">评分方式：字母等级</span><br>
                        <span id="current-grade">当前评分：B</span><br>
                        <span id="letter-buttons-status">字母按钮组：显示</span><br>
                        <span id="text-buttons-status">文字按钮组：隐藏</span>
                    </div>

                    <!-- 测试按钮 -->
                    <div class="mt-3">
                        <button type="button" class="btn btn-primary me-2" id="test-letter">测试切换到字母评分</button>
                        <button type="button" class="btn btn-primary me-2" id="test-text">测试切换到文字评分</button>
                        <button type="button" class="btn btn-secondary" id="refresh-status">刷新状态</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script src="{% static 'grading/vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'grading/vendor/bootstrap/bootstrap.bundle.min.js' %}"></script>

<script>
// 全局变量
let selectedGrade = 'B';
let gradeMode = 'letter';

// 切换评分方式
function switchGradeMode(mode) {
    console.log('=== 切换评分方式开始 ===');
    console.log('目标模式:', mode);

    gradeMode = mode;

    // 更新按钮状态
    $('.grade-mode-btn').removeClass('active');
    const targetButton = $(`.grade-mode-btn[data-mode="${mode}"]`);
    targetButton.addClass('active');

    // 显示/隐藏对应的评分按钮组
    if (mode === 'letter') {
        $('#text-grade-buttons').hide();
        $('#letter-grade-buttons').show();

        if (!selectedGrade || !['A', 'B', 'C', 'D', 'E'].includes(selectedGrade)) {
            selectedGrade = 'B';
        }
        setGradeButtonState(selectedGrade);

    } else if (mode === 'text') {
        $('#letter-grade-buttons').hide();
        $('#text-grade-buttons').show();

        if (!selectedGrade || !['优秀', '良好', '中等', '及格', '不及格'].includes(selectedGrade)) {
            selectedGrade = '良好';
        }
        setGradeButtonState(selectedGrade);
    }

    updateStatus();
    console.log('=== 评分方式切换完成 ===');
}

// 设置评分按钮状态
function setGradeButtonState(grade) {
    console.log('设置评分按钮状态:', grade);

    $('.grade-button').removeClass('active');
    const targetButton = $(`.grade-button[data-grade="${grade}"]`);
    targetButton.addClass('active');
    selectedGrade = grade;

    updateStatus();
}

// 更新状态显示
function updateStatus() {
    $('#current-mode').text('评分方式：' + (gradeMode === 'letter' ? '字母等级' : '文字等级'));
    $('#current-grade').text('当前评分：' + selectedGrade);
    $('#letter-buttons-status').text('字母按钮组：' + ($('#letter-grade-buttons').is(':visible') ? '显示' : '隐藏'));
    $('#text-buttons-status').text('文字按钮组：' + ($('#text-grade-buttons').is(':visible') ? '显示' : '隐藏'));
}

// 页面加载完成后初始化
$(document).ready(function() {
    console.log('页面加载完成，初始化评分方式切换功能');

    // 绑定评分方式切换按钮事件
    $(document).on('click', '.grade-mode-btn', function(e) {
        e.preventDefault();
        const mode = $(this).data('mode');
        console.log('评分方式按钮被点击:', mode);
        switchGradeMode(mode);
    });

    // 绑定评分按钮点击事件
    $(document).on('click', '.grade-button', function() {
        const grade = $(this).data('grade');
        console.log('评分按钮被点击:', grade);
        setGradeButtonState(grade);
    });

    // 绑定测试按钮事件
    $('#test-letter').click(function() {
        console.log('测试切换到字母评分');
        switchGradeMode('letter');
    });

    $('#test-text').click(function() {
        console.log('测试切换到文字评分');
        switchGradeMode('text');
    });

    $('#refresh-status').click(function() {
        console.log('刷新状态');
        updateStatus();
    });

    // 初始化状态
    updateStatus();
    console.log('初始化完成');
});
</script>
{% endblock %}
